<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">
    <el-descriptions class="margin-top"  :column="2"  border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          活动名称
        </template>
        {{form.promotionName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          优惠券名称
        </template>
        {{form.couponName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          优惠券类型
        </template>
        <dict-tag :options="dict.type.mall_coupon_type" :value="form.couponType"/>
      </el-descriptions-item>
      <el-descriptions-item v-if="form.couponType == 'PRICE'">
        <template slot="label">
          <i class="el-icon-tickets"></i>
          面额(元)
        </template>
        <el-tag size="small">{{form.price}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item v-if="form.couponType == 'POINT'">
        <template slot="label">
          <i class="el-icon-tickets"></i>
          折扣
        </template>
        <el-tag size="small">{{form.couponDiscount}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          领取方式
        </template>
        <dict-tag :options="dict.type.mall_coupon_get_type" :value="form.getType"/>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          店铺承担比例
        </template>
       {{form.storeCommission || 0 }} %
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          发放数量
        </template>
        {{form.publishNum == -1 ? '不限制' : form.publishNum}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          领取数量限制
        </template>
        {{form.couponLimitNum == -1 ? '不限制' : form.couponLimitNum}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          范围描述
        </template>
        {{form.description}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          消费门槛
        </template>
        {{form.consumeThreshold}}
      </el-descriptions-item>

      <el-descriptions-item v-if="form.getType == 'FREE'">
        <template slot="label">
          <i class="el-icon-office-building"></i>
          有效期
        </template>
        {{form.startTime}} - {{form.endTime}}
      </el-descriptions-item>

      <el-descriptions-item v-if="form.getType == 'ACTIVITY'">
        <template slot="label">
          <i class="el-icon-office-building"></i>
          有效期
        </template>
        领取当天开始{{form.effectiveDays}}天内有效
      </el-descriptions-item>

      <el-descriptions-item >
        <template slot="label">
          <i class="el-icon-office-building"></i>
          使用范围
        </template>
        <el-radio-group v-model="form.scopeType" disabled>
          <el-radio-button label="ALL">全品类</el-radio-button>
          <el-radio-button label="PORTION_GOODS">指定商品</el-radio-button>
          <el-radio-button label="PORTION_GOODS_CATEGORY">部分商品分类</el-radio-button>
        </el-radio-group>
      </el-descriptions-item>

      <el-descriptions-item v-if="form.scopeType == 'PORTION_GOODS_CATEGORY'">
        <template slot="label">
          <i class="el-icon-office-building"></i>
          商品分类
        </template>
        <el-cascader v-model="scopeIdGoods" :options="goodsCategoryList" :props="catProps" disabled></el-cascader>
      </el-descriptions-item>

      <el-descriptions-item v-if="form.scopeType == 'PORTION_GOODS'">
        <template slot="label">
          <i class="el-icon-office-building"></i>
          指定商品
        </template>
        <el-table  :data="promotionGoodsList" >
          <el-table-column label="商品名称" align="center" prop="goodsName" />
          <el-table-column label="商品价格" align="center" prop="price" />
          <el-table-column label="库存" align="center" prop="quantity" />
        </el-table>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import {  getCoupon } from "@/api/mall/promotion/coupon";
import { categoryTreeList } from '@/api/mall/goods/category'
// import { listPromotionGoods } from '@/api/mall/promotion/promotion-goods'
export default {
  name: "CouponView",
  dicts: ['mall_coupon_get_type','mall_coupon_type','mall_coupon_scope_type'],
  props: {
    couponId: {
      type: Number
    }
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      viewopen: false,
      goodsopen: false,
      // 日期范围
      dateRange: [],
      formDateRange: [],
      // 查询参数
      // 表单参数
      form: {},
      scopeIdGoods: [],
      goodsCategoryList: [],
      promotionGoodsList: [],
      selectedGoods: [],
      rangeTimeType: 1,
      catProps: {
        value: 'id',
        label: 'name'
      },
    };
  },
  created() {
    this._getCoupon();
    this.loadGoodsCategory();
  },
  methods: {
    loadGoodsCategory(){
      categoryTreeList().then( res => {
        this.goodsCategoryList = res.data
      })
    },
    /** 查询商城优惠券列表 */
    _getCoupon() {
      getCoupon(this.couponId).then(response => {
        this.form = response.data.coupon;
        if(this.form.scopeType == 'PORTION_GOODS_CATEGORY'){
          this.scopeIdGoods = []
          this.scopeIdGoods = this.form.scopeId.split(",")
        }

        if(this.form.scopeType == 'PORTION_GOODS'){
          this.promotionGoodsList =  response.data.promotionGoodsList
        }
      });
    },
  }
};
</script>
